let VSHADER_SOURCE =
  'attribute vec4 a_Position;\n' +
  'attribute vec2 a_TexCoord;\n' +
  'varying vec2 v_TexCoord;\n' +
  'void main(){\n' +
  '   gl_Position  = a_Position;\n' +
  '   v_TexCoord = a_TexCoord;\n' +
  '}\n';
let FSHADER_SOURCE =
  '#ifdef GL_ES\n' +
  'precision mediump float;\n' +
  '#endif\n' +
  'uniform sampler2D u_Sampler;\n' +
  'varying vec2 v_TexCoord;\n' +
  'void main(){\n' +
  '   gl_FragColor =texture2D(u_Sampler,v_TexCoord);\n' +
  '}\n';

const main = () => {
  let canvas = document.getElementById('webgl');
  let gl = getWebGLContext(canvas);

  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to initialize shaders');
    return;
  }

  let n = initVertexBuffers(gl);
  if (n < 0) {
    console.log('Failed to set the positions of the vertices');
    return;
  }
  gl.enable(gl.BLEND);

  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

  gl.clearColor(0.1, 0.0, 0.0, 1.0);

  if (!initTextures(gl, n)) {
    console.log('Failed to intialize the texture.');
    return;
  }
}

const initTextures = (gl, n) => {
  //you need three :1.texture object   2.you defined variable in shaders   3.image
  //1.texture object
  let texture = gl.createTexture();
  if (!texture) {
    console.log('Failed to create the texture object');
    return false;
  }
  //2.variable: get the location of u_Sampler  
  let u_Sampleraddr = gl.getUniformLocation(gl.program, 'u_Sampler');
  if (!u_Sampleraddr) {
    console.log('Failed to get the storage location of u_Sampleraddr');
    return false;
  }
  //3.iamge
  let image = new Image();
  if (!image) {
    console.log('Failed to create the image object');
    return false;
  }
  //this is a asynchronous fun;when image loaded by browser,then webgl should load image
  image.onload = function () {
    loadTexture(gl, n, texture, u_Sampleraddr, image);
  };
  //browser load image
  image.src = './bee.svg';
  return true;
  //config the mapping way
  //load image, config it , use it in webgl
  //ectract color from texture 
}

const loadTexture = (gl, n, texture, u_Sampleraddr, image) => {
  //reverse the image
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
  //active texture0
  gl.activeTexture(gl.TEXTURE0);
  //bind texture0 and texture
  gl.bindTexture(gl.TEXTURE_2D, texture);
  //config texture param
  // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  // gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  //distribute texture to texture0 ; some feature of image
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  //texture0 to shader-u_Sampleraddr
  gl.uniform1i(u_Sampleraddr, 0);
  //draw!
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
}

const initVertexBuffers = (gl, VSHADER_SOURCE, FSHADER_SOURCE) => {
  let verticesTexCoords = new Float32Array([
    -0.5, 0.5, 0.0, 1.0, 
    -0.5, -0.5, 0.0, 0.0,
    0.5, 0.5, 1.0, 1.0,
    0.5, -0.5, 1.0, 0.0
  ]);
  let n = 4;
  let verticesTexCoordsBuffer = gl.createBuffer();
  if (!verticesTexCoordsBuffer) {
    console.log('Failed to create the verticesTexCoordsBuffer object ');
    return -1;
  }
  gl.bindBuffer(gl.ARRAY_BUFFER, verticesTexCoordsBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);
  let a_Positionaddr = gl.getAttribLocation(gl.program, 'a_Position');
  let a_TexCoordaddr = gl.getAttribLocation(gl.program, 'a_TexCoord');
  let FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;
  if (a_Positionaddr < 0) {
    console.log('Failed to get the storage location of a_Positionaddr');
    return -1;
  }
  if (a_Positionaddr < 0) {
    console.log('Failed to get the storage location of a_Positionaddr');
    return -1;
  }
  gl.vertexAttribPointer(a_Positionaddr, 2, gl.FLOAT, false, FSIZE * 4, 0);
  gl.vertexAttribPointer(a_TexCoordaddr, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2);
  gl.enableVertexAttribArray(a_Positionaddr);
  gl.enableVertexAttribArray(a_TexCoordaddr);
  return n;
}

main();